<template>
	<div :class="{ fullscreen : fullscreen }" class="tinymce-container" :style="{width:containerWidth,zIndex:20000}">
		<textarea :id="tinymceId" class="tinymce-textarea" style="z-index: 20000;" />
		<div class="editor-custom-btn-container">
			<!--<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />-->
		</div>
	</div>

</template>

<script>
	// import editorImage from './components/EditorImage.vue'
	import plugins from './plugins'
	import toolbar from './toolbar'
	import load from './dynamicLoadScript'

	import {
		uploadImage
	} from '/@/api/upload'
	import {
		getCookieByKey
	} from '/@/utils/cookies'
	import {
		getEnvs
	} from "/@/utils/envs.js"
	import {
		GLOBAL_DATA
	} from '/@/api/constant'
	//const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
	//const tinymceCDN = 'https://resources.shadowcreator.com/project-sources/lib/tinymce5.7.1/tinymce.min.js'
	const tinymceCDN = 'https://lg.weimahl.com/static/tinyme.min.js'

	import {
		getCurrentInstance,
		defineComponent,
		computed,
		nextTick,
		ref,
		unref,
		watch,
		onMounted,
		onDeactivated,
		onActivated,
		onUnmounted,
	} from 'vue';

	const languages = {
		'en': 'en',
		'zh': 'zh_CN',
		'es': 'es_MX',
		'ja': 'ja'
	}

	export default {
		name: 'Tinymce',
		props: {
			id: {
				type: String,
				default: function() {
					return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
				}
			},
			value: {
				type: String,
				default: ''
			},
			toolbar: {
				type: Array,
				required: false,
				default () {
					return []
				}
			},
			menubar: {
				type: String,
				default: 'file edit insert view format table'
			},
			height: {
				type: [Number, String],
				required: false,
				default: 360
			},
			// elStyle : {
			//   type : Object,
			//   required : false,
			//   default() {
			//     return {
			//       left : 0,
			//       width : 0
			//     }
			//   }
			// },
			width: {
				type: [Number, String],
				required: false,
				default: 'auto'
			}
		},
		// components: { editorImage },
		// inheritAttrs: false,
		emits: ['change', 'update:modelValue', 'input'],
		setup(props, ctx) {
			console.log('ctx', ctx)
			const {
				emit,
				attrs
			} = ctx

			const hasChange = ref(false)
			const hasInit = ref(false)
			const tinymceId = ref(props.id)
			const fullscreen = ref(false)
			const languageTypeList = ref(languages)

			const containerWidth = computed(() => {
				const width = props.width
				if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'`
					return `${width}px`
				}
				return width
			});

			watch(
				() => [props.value],
				() => {
					if (!hasChange.value && hasInit.value) {
						setContent(props.value)
					}
				}
			)

			onMounted(() => {
				init()
			})

			onActivated(() => {
				if (window.tinymce) {
					initTinymce()
				}
			})

			onDeactivated(() => {
				destroyTinymce()
			})

			onUnmounted(() => {
				destroyTinymce()
			})

			const init = () => {
				load(tinymceCDN, (err) => {
					if (err) {
						const ins = getCurrentInstance()
						ins && ins.appContext.config.globalProperties.$message.error(err.message)
						return
					}
					initTinymce()
				})
			}
			const getUrl = () => {
				const {
					envStr
				} = getEnvs()
				return GLOBAL_DATA[envStr]['image-url'];
			}
			const initTinymce = () => {
				window.tinymce.init({
					selector: `#${tinymceId.value}`,
					menubar: props.menubar,
					plugins: plugins.join(','),
					external_plugins: {
						// 'audios' : require( './utils/audio.js' ),
						// 'audios' : '/static/plugin.min.js'
						// 'maths': 'http://www.maths.com/plugin.min.js'
					},
					toolbar: props.toolbar.length > 0 ? props.toolbar : toolbar,
					toolbar_mode: 'sliding',
					height: props.height,
					// content_css : '/static/custorm.css?rev=' + new Date().getTime(),
					// content_style : '.minganci { color: red; } em.minganci { font-style : normal; } p { margin : 0; padding : 0; }',
					language: languageTypeList.value['zh'],
					body_class: 'panel-body ',
					object_resizing: true,
					content_style: "z-index:100000",
					lineheight_formats: '1 1.1 1.2 1.3 1.4 1.5 1.75 2',
					fontsize_formats: '12px 14px 16px 18px 24px 36px',
					media_live_embeds: true,
					media_poster: false, // 禁用填写封面图片
					media_alt_source: false, // 禁用Alternative source媒体对话框中的输入字段
					audio_template_callback: function(data) {
						return `
            <audio controls>
              <source src="${data.source}" ${data.sourcemime ? ' type="' + data.sourcemime + '"' : ''} />
            </audio>
          `
					},
					file_picker_types: 'file image media', // 'media',

					file_picker_callback: function(cb, value, meta) {
						if (meta.filetype == 'image') {
							var input = document.createElement('input')
							input.setAttribute('type', 'file')
							input.setAttribute('accept', 'image/png,image/jpg,image/gif')
							input.onchange = function() {
								var file = this.files[0]
								var reader = new FileReader()
								reader.onload = function() {
									var id = 'blobid' + (new Date()).getTime()
									var blobCache = tinymce.activeEditor.editorUpload
										.blobCache
									var base64 = reader.result.split(',')[1]
									var blobInfo = blobCache.create(id, file, base64)
									blobCache.add(blobInfo)
									cb(blobInfo.blobUri(), {
										title: file.name
									})
								}
								reader.readAsDataURL(file)
							}
							input.click()
						}
					},
					end_container_on_empty_block: true,
					powerpaste_word_import: 'clean',
					code_dialog_height: 450,
					code_dialog_width: 1000,
					imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
					default_link_target: '_blank',
					link_title: false,
					nonbreaking_force_tab: true,
					images_upload_handler: (blobInfo, success, failure, progress) => {
						const filename = blobInfo.filename()
						const fmData = new FormData()
						fmData.append(
							'file',
							blobInfo.blob(),
							filename
						)
						fmData.append('mode', 3)
						fmData.append('token', getCookieByKey('vite_admin_token'))
						uploadImage(fmData)
							.then(({
								data
							}) => {

								success(getUrl() + data.url)
							})
							.catch((error) => {
								failure(error, {
									remove: true
								})
							})
					},
					init_instance_callback: editor => {
						if (props.value) {
							editor.setContent(props.value)
						}
						hasInit.value = true
						editor.on('KeyUp SetContent SetAttrib Change', () => {
							hasChange.value = true
							//emit('input', editor.getContent())

							const content = editor.getContent()
							emit('update:value', content)
							// emit('change', content)
						})
					},
					setup(editor) {
						editor.on('FullscreenStateChanged', (e) => {
							_this.fullscreen = e.state
						})
					},

					// selector: `#${tinymceId.value}`,
					// language: languageTypeList.value['en'],
					// height: props.height,
					// body_class: 'panel-body ',
					// object_resizing: false,
					// toolbar: props.toolbar.length > 0 ? props.toolbar : toolbar,
					// menubar: props.menubar,
					// plugins: plugins,
					// end_container_on_empty_block: true,
					// powerpaste_word_import: 'clean',
					// code_dialog_height: 450,
					// code_dialog_width: 1000,
					// advlist_bullet_styles: 'square',
					// advlist_number_styles: 'default',
					// imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
					// default_link_target: '_blank',
					// link_title: false,
					// nonbreaking_force_tab: true,
					// init_instance_callback: editor => {
					//   if ( props.value ) {
					//     editor.setContent( props.value )
					//   }
					//   hasInit.value = true
					//   editor.on('内容已更新', () => {
					//     hasChange.value = true
					//     emit('input', editor.getContent())
					//   })
					// },
					// setup(editor) {
					//   editor.on('FullscreenStateChanged', (e) => {
					//     fullscreen.value = e.state
					//   })
					// },
					// convert_urls: false
				})
			}

			const destroyTinymce = () => {
				const tinymce = window.tinymce.get(tinymceId.value)
				if (fullscreen.value) {
					tinymce.execCommand('mceFullScreen')
				}
				if (tinymce) {
					tinymce.destroy()
				}
			}

			function setContent(value) {
				console.log('vale>>>>', value)
				window.tinymce.get(tinymceId.value).setContent(value)
				// nextTick( () => window.tinymce.get( tinymceId.value ).setContent( value || '' ) )
			}

			const getContent = (() => {
				window.tinymce.get(tinymceId.value).getContent()
			})

			const imageSuccessCBK = (arr => {
				arr.forEach(v => window.tinymce.get(tinymceId.value).insertContent(
					`<img class="wscnph" src="${v.url}" >`))
			})

			return {
				fullscreen,
				containerWidth,
				tinymceId,
				init,
				initTinymce,
				destroyTinymce,
				setContent,
				getContent,
				imageSuccessCBK,
			};
		}
	}
</script>